<template>
  <div class="app-container">
    <tit></tit>
    <div class="template-form">
      <div class="form">
        <div class="form-item dis-flex justify-b mb-30 dis-flex-ac">
          <div class="grid-tit">
            <span>* </span>店铺账号: </div>
          <div class="grid-content flex-1">
            <el-input v-model="subAccount.account" placeholder="请输入店铺账号"></el-input>
          </div>
        </div>
        <div class="form-item">
          <div class="dis-flex justify-b">
            <div class="grid-tit mb-20">
              <span>* </span>身份证照片：</div>
            <div class="grid-content flex-1 img-desc">建议尺寸475*320，大小不超过2M，支持Jpg、Png格式</div>
          </div>
          <div class="preview-img dis-flex">
            <div class="grid-tit"></div>
            <upload :subAccount.sync="subAccount" :resDomain='resDomain'></upload>
          </div>
        </div>
        <div class="form-item dis-flex justify-b mb-30 dis-flex-ac">
          <div class="grid-tit">
            <span>* </span>身份证号码：</div>
          <div class="grid-content flex-1">
            <el-input v-model="subAccount.cardId" placeholder="请输入身份证号码"></el-input>
          </div>
        </div>
        <div class="form-item dis-flex justify-b mb-30 dis-flex-ac">
          <div class="grid-tit">
            <span>* </span>联系人：</div>
          <div class="grid-content flex-1">
            <el-input v-model="subAccount.contact" placeholder="请输入联系人"></el-input>
          </div>
        </div>
        <div class="form-item dis-flex justify-b mb-30 dis-flex-ac">
          <div class="grid-tit">
            <span>* </span>手机号码：</div>
          <div class="grid-content flex-1">
            <el-input v-model="subAccount.phone" placeholder="请输入手机号码"></el-input>
          </div>
        </div>
        <div class="form-item dis-flex justify-b mb-30 dis-flex-ac">
          <div class="grid-tit">
            微信号：</div>
          <div class="grid-content flex-1">
            <el-input v-model="subAccount.weichatId" placeholder="请输入微信号"></el-input>
          </div>
        </div>
        <div class="form-item dis-flex justify-b mb-30 dis-flex-ac">
          <div class="grid-tit">
            <span>* </span>有效期：</div>
          <div class="grid-content flex-1">
            <el-radio-group v-model="subAccount.buyDays">
              <el-radio :label="item" v-for="item in radioLists">{{item}}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="form-item dis-flex justify-b mb-30 dis-flex-ac">
          <div class="grid-tit">
            <span>* </span>选择地址：</div>
          <div class="grid-content flex-1">
            <VDistpicker :province="subAccount.province" :city="subAccount.city" :area="subAccount.district" @province="onChangeProvince"
              @city="onChangeCity" @area="onChangeArea"></VDistpicker>
          </div>
        </div>
        <div class="form-item dis-flex justify-b mb-30 dis-flex-ac">
          <div class="grid-tit">
            <span>* </span>详细地址：</div>
          <div class="grid-content flex-1">
            <el-input v-model="subAccount.address" placeholder="请输入详细地址" type="textarea" :rows="2"></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="txt-c">
      <el-button type="success" class="save-btn mt-30" @click="addUser">保存</el-button>
    </div>
  </div>
</template>

<script>
  String.prototype.trim = function () {
    ///<summary>去掉字符串前后空格</summary>
    return this.replace(/(^\s*)|(\s*$)/g, "");
  };
  import tit from '@/components/Htitle'
  import upload from "@/components/Upload2";
  import VDistpicker from 'v-distpicker'
  export default {
    data() {
      return {
        list: null,
        listLoading: true,
        subAccount: {
          "account": "",//店铺账号
          "address": "",//详细地址 
          "buyDays": 30,//有效期天数
          "cardBackUrl": "",//身份证背面
          "cardFrontUrl": "",//身份证正面
          "cardId": "",//身份证号
          "city": "",//市
          "contact": "",//联系人
          "district": "",//区
          "id": "",//子账号id
          "phone": "",//电话
          "province": "",//省
          "weichatId": "",//微信号
          "addUser_state":false
        },
        resDomain: '',
        radioLists: [30, 90, 180, 360]
      }
    },
    components: {
      tit,
      upload,
      VDistpicker
    },
    created() {
      let self = this
      if (self.$route.query.id) {
        self.subAccount.id = self.$route.query.id
        self.getAccount(self.$route.query.id)
      }
    },
    methods: {
      getAccount(id) {
        let self = this
        self.$store.dispatch('getAccount', { id: id }).then(res => {
          if (res.success) {
            let data = res.data
            self.resDomain = data.resDomain
            self.subAccount = {
              "account": data.userMain.username,//店铺账号
              "address": data.userMain.userInfo.address,//详细地址 
              "buyDays": data.userMain.buyDateLength,//有效期天数
              "cardBackUrl":data.userMain.userInfo.idCardBackUrl,//身份证背面
              "cardBackUrl_temp":data.resDomain+data.userMain.userInfo.idCardBackUrl,//身份证背面
              "cardFrontUrl":data.userMain.userInfo.idCardFrontUrl,//身份证正面
              "cardFrontUrl_temp":data.resDomain+data.userMain.userInfo.idCardFrontUrl,//身份证背面
              "cardId": data.userMain.userInfo.idCardNum,//身份证号
              "city": data.userMain.userInfo.city,//市
              "contact": data.userMain.userInfo.contact,//联系人
              "district": data.userMain.userInfo.district,//区
              "id": id,//子账号id
              "phone": data.userMain.userInfo.phone,//电话
              "province": data.userMain.userInfo.province,//省
              "weichatId": data.userMain.userInfo.weichatId//微信号
            }
          } else {
            self.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      onChangeProvince(data) {
        console.log(data)
        this.subAccount.province = data.value
      },
      onChangeCity(data) {
        this.subAccount.city = data.value
      },
      onChangeArea(data) {
        this.subAccount.area = data.value
      },
      addUser() {
        let self = this
        if(self.addUser_state){
          return self.$message({
            message:"请勿重复提交",
            type:"error"
          })
        }
        self.addUser_state = true
        if (self.subAccount.account.trim() == "") {
          self.addUser_state = false
          return self.$message({
            message: "请输入店铺账号",
            type: "error"
          });
        }
        if (self.subAccount.cardBackUrl == "" || self.subAccount.cardFrontUrl=="") {
          self.addUser_state = false
          return self.$message({
            message: "请上传的证件照片",
            type: "error"
          });
        }
        if (self.subAccount.cardId == "") {
          self.addUser_state = false
          return self.$message({
            message: "请输入身份证号",
            type: "error"
          });
        } else {
          let reg =/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
          if (!reg.test(self.subAccount.cardId)) {
            self.addUser_state = false
            return self.$message({
              message: "请输入正确身份证号",
              type: "error"
            });
          }
        }
        if (self.subAccount.contact == "") {
          self.addUser_state = false
          return self.$message({
            message: "请输入联系人",
            type: "error"
          });
        }
        if (self.subAccount.phone == "") {
          self.addUser_state = false
          return self.$message({
            message: "请输入电话",
            type: "error"
          });
        } else {
          if (!(/^[1][3,4,5,7,8][0-9]{9}$/).test(self.subAccount.phone)) {
            self.addUser_state = false
            return self.$message({
              message: "请输入正确的电话",
              type: "error"
            });
          }
        }
        if ((self.subAccount.province == "" && self.subAccount.city == "")) {
          self.addUser_state = false
          return self.$message({
            message: "请选择正确地址",
            type: "error"
          });
        }
        if (self.subAccount.address.trim() == "") {
          self.addUser_state = false
          return self.$message({
            message: "请输入详细地址",
            type: "error"
          });
        }
        if (self.$route.query.id) {
          self.subAccount['id'] = self.$route.query.id
          self.$store.dispatch('updateAccount', self.subAccount).then(res => {
            self.addUser_state = false
            if (res.success) {
              self.$router.push({ name: 'Tree' });
            } else {
              self.$message({
                message: res.message,
                type: "error"
              });
            }
          })
        } else {
          self.$store.dispatch('createAccount', self.subAccount).then(res => {
            self.addUser_state = false
            if (res.success) {
              self.$router.push({ name: 'Tree' });
            } else {
              self.$message({
                message: res.message,
                type: "error"
              });
            }
          })
        }
      }
    }
  }
</script>
<style scoped leng="scss">
  .template-form {
    background-color: #ffffff;
    width: 100%;
  }
</style>